<template>
  <div id="wrapper" v-if="loadFinish">
    <Transition name="top-fade">
      <div class="header-view" v-show="headerShow">
        <div class="logo">
          <img src="~img/logo.png" alt="" />
        </div>
        <div class="logo-title">
          <img src="~img/logo-title.png" alt="" />
        </div>
        <div class="nav-view">
          <div class="nav">首页<img src="~img/header-nav-bg.png" /></div>
          <div class="nav" v-for="(item, index) of navList" :key="index" @click="clickNav(index)">
            {{ item.cate_name }}
          </div>
          <div class="login-btn" v-if="token == ''" @click="openLogin">注册/登录</div>
          <div class="login-btn" v-else @click="logout">退出登录</div>
        </div>
      </div>
    </Transition>
    <div class="banner-view">
      <div class="banner" v-if="this.banner.length > 1">
        <img :src="banner[0].image" alt="" />
      </div>
      <div class="logo">
        <img src="~img/logo2.png" alt="" />
      </div>
    </div>
    <div class="wrapper2-view">
      <div class="bg1"></div>
      <div class="bg2"></div>
      <div class="four-list">
        <div class="li" v-for="(item, index) of navList" :key="index" @click="clickNav(index)">
          <img :src="item.image" alt="" />
        </div>
      </div>
      <div class="article-video-view">
        <div class="video-view" v-if="this.banner.length > 3">
          <img :src="banner[2].image" alt="" class="bg" />
          <div class="video-btn" @click="openVideo"></div>
        </div>
        <div class="article-view">
          <div class="list">
            <div class="li" v-for="(item, index) of articleList" :key="index" @click="openDetail(item.article_id)">
              <div class="title">{{ item.title }}</div>
              <div class="time">{{ item.add_time }}</div>
              <div class="line"></div>
            </div>
          </div>
          <!-- <div class="more-btn">
            查看更多
            <div class="arraw-right"></div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="banner2-view" :style="'background-image: url(' + banner[1].image + ')'" v-if="this.banner.length > 2">
      <div class="tips">
        <div class="title">
          {{ banner[1].banner_name }}
          <div class="icon1"></div>
        </div>
        <div class="content">
          {{ banner[1].remark }}
        </div>
      </div>
    </div>
    <div class="visit-view">
      <div class="main">
        <div class="title">
          走入河湟 参观服务
          <div class="icon2"></div>
        </div>
        <div class="list">
          <div class="li" v-for="(item, index) of visitList" :key="index" @click="clickVisit(index)">
            <img :src="item.image" alt="" />
          </div>
        </div>
      </div>
    </div>
    <bottom-view></bottom-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import bottomView from '@/components/bottomView'
export default {
  name: 'index',
  components: {
    bottomView
  },
  data() {
    return {
      token: '',
      headerShow: true,
      navList: [],
      banner: [],
      articleList: [],
      visitList: [],
      loadFinish: false
    }
  },
  computed: {
    ...mapGetters(['homeInfo', 'topCate', 'commonSysObj'])
  },
  mounted() {
    this.token = this.TOKEN
    this.init()
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    openLogin() {
      this.eventBus.$emit('openLogin')
    },
    init() {
      this.navList = this.topCate
      this.banner = this.homeInfo.banner
      this.articleList = this.homeInfo.consultation.map(item => {
        item.add_time = this.COMMON.handleTime(item.add_time, 'date')
        return item
      })
      if (this.articleList.length > 3) this.articleList.length = 3
      this.visitList = this.homeInfo.visit
      this.loadFinish = true
    },
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 400) {
        this.headerShow = false
      } else {
        this.headerShow = true
      }
    },
    clickNav(i) {
      this.$router.goto({
        path: '/articleList',
        query: {
          id: this.navList[i].article_cate_id
        }
      })
    },
    clickVisit(i) {
      this.$router.goto({
        path: '/articleList',
        query: {
          id: this.visitList[i].article_cate_id
        }
      })
    },
    openDetail(id) {
      this.$router.goto({
        path: '/articleDetail',
        query: {
          id
        }
      })
    },
    openVideo() {
      this.eventBus.$emit('openVideo', { title: '', url: this.commonSysObj[4].value })
    },
    logout() {
      this.$message({
        message: '退出登录',
        type: 'success'
      })
      this.COMMON.removeStorage('token')
      setTimeout(() => {
        window.location.reload()
      }, 800)
    }
  }
}
</script>

<style lang="less" scoped>
#wrapper {
  position: relative;
}
.header-view {
  position: fixed;
  width: 100%;
  height: 420px;
  top: 0;
  left: 0;
  z-index: 9;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.77) 38%,
    rgba(0, 0, 0, 0.53) 66%,
    rgba(0, 0, 0, 0.06) 93%,
    rgba(0, 0, 0, 0) 100%
  );
  .logo {
    width: 53px;
    height: 53px;
    position: absolute;
    top: 44px;
    left: 52px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .logo-title {
    width: 704px;
    height: 69px;
    position: absolute;
    top: 36px;
    left: 105px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .nav-view {
    height: 42px;
    position: absolute;
    top: 52px;
    right: 40px;
    overflow: hidden;
    .nav {
      float: left;
      width: 103px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      color: #fff;
      font-size: 20px;
      margin-right: 22px;
      cursor: pointer;
      position: relative;
      margin-top: 4px;
      &:hover {
        img {
          opacity: 1;
        }
      }
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        // transition: all 0.3s linear;
        // &.acitve {
        //   opacity: 1;
        // }
      }
    }
    .login-btn {
      width: 126px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      float: left;
      background: @base-color;
      color: #fff;
      font-size: 20px;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
.banner-view {
  width: 100%;
  // height:1080px;
  position: relative;
  .banner {
    width: 100%;
    // height:1080px;
    img {
      width: 100%;
      height: auto;
      max-height: 1080px;
    }
  }
  .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -40%);
    width: 360px;
    height: 194px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.wrapper2-view {
  width: 100%;
  height: 1700px;
  position: relative;
  .bg1 {
    width: 100%;
    height: 800px;
    background-image: url(../assets/wrapper2-bg1.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bg2 {
    width: 100%;
    height: 900px;
    background-image: url(../assets/wrapper2-bg2.jpg);
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 800px;
    left: 0;
  }
  // background: url(../assets/wrapper2-bg.jpg) center center no-repeat;
  // background-size: 100% 100%;
}
.four-list {
  width: 1348px;
  padding-top: 159px;
  margin: 0 auto;
  position: relative;
  .li {
    width: 316px;
    height: 756px;
    display: inline-block;
    margin-right: 28px;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
    &:nth-child(2) {
      transform: translateY(58px);
    }
    &:nth-child(4) {
      transform: translateY(58px);
    }
    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s;
      &:hover {
        transform: scale(1.05);
        box-shadow: 7px 7px 8px 4px rgba(0, 0, 0, 0.2);
      }
    }
  }
}
.article-video-view {
  overflow: hidden;
  width: 1489px;
  margin: 208px auto 0;
  .video-view {
    float: left;
    width: 676px;
    height: 458px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    .bg {
      width: 100%;
      height: 100%;
    }
  }
  .article-view {
    float: right;
    width: 621px;
    height: 458px;
    position: relative;
    background: url(../assets/home-article-bg.png) center center no-repeat;
    background-size: 100% 100%;
    .more-btn {
      position: absolute;
      color: #fff;
      cursor: pointer;
      font-size: 18px;
      line-height: 36px;
      bottom: 45px;
      right: 50px;
    }
    .list {
      position: absolute;
      top: 50px;
      left: 118px;
      .li {
        color: #b8af9d;
        margin-bottom: 10px;
        cursor: pointer;
        .title {
          font-size: 18px;
          line-height: 26px;
          width: 387px;
          .ellipsis();
          margin-bottom: 10px;
          transition: all 0.1s linear;
        }
        .time {
          font-size: 16px;
          line-height: 22px;
          margin-bottom: 10px;
        }
        .line {
          height: 1px;
          width: 387px;
          background: url(../assets/line.png) center center no-repeat;
          background-size: 100% 100%;
        }
        &:hover {
          .title {
            font-weight: 700;
            color: #c1a160;
          }
        }
        &:last-child {
          margin-bottom: 0;
          .line {
            display: none;
          }
        }
      }
    }
  }
}
.banner2-view {
  width: 100%;
  height: 906px;
  position: relative;
  // background-image: url(../assets/banner2-bg.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  .tips {
    position: absolute;
    width: 1023px;
    height: 347px;
    position: absolute;
    background: url(../assets/banner2-tips-bg.png) center center no-repeat;
    background-size: 100% 100%;
    top: 143px;
    left: -1px;
    padding-top: 63px;
    padding-left: 80px;
    padding-right: 30px;
    color: #fff;
    .title {
      font-size: 44px;
      line-height: 68px;
    }
    .content {
      margin-top: 25px;
      font-size: 31px;
      line-height: 50px;
    }
  }
}
.visit-view {
  height: 500px;
  width: 100%;
  background-image: url(../assets/wrapper2-bg2.jpg);
  background-size: cover;
  background-position: center center;
  .main {
    width: 1457px;
    margin: 0 auto 0;
    padding-top: 61px;
    .title {
      text-align: center;
      font-size: 48px;
      line-height: 68px;
      margin-bottom: 80px;
    }
    .list {
      text-align: center;
      .li {
        width: 293px;
        height: 231px;
        display: inline-block;
        margin-right: 95px;
        cursor: pointer;
        &:last-child {
          margin-right: 0;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
